<template>
  <Card :bordered="false">
    <p slot="title">缓存清理</p>
    <div style="padding-bottom: 10px;">
      <Row :gutter="16">
        <Col span="6">
          <Select v-model="region"  placeholder="请选择区域" @on-change="handRegion">
            <!-- <Option v-if="permission.redis_aliyun_view === '1'" value="offline">阿里云环境</Option> -->
            <Option value="offline" >本地环境</Option>
          </Select>
        </Col>
      </Row>
    </div>
    <Table border :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <template v-if="permission.redis_clear === '1'">
          <Button type="info" size="small" style="margin-right: 5px" @click="cleanDB_id(index)">索引清理</Button>
          <Button type="warning" size="small" :loading="loading_onekey[index]" @click="oneKeyClean(index)">
            <span v-if="!loading_onekey[index]">一键清理</span>
            <span v-else>清理中...</span>
          </Button>
        </template>
        <template v-else><span style="color:#ed4014">无权限</span></template>
      </template>
    </Table>
    <Modal v-model="modal1" draggable scrollable title="按索引清理">
      <div style="margin-left:20%">
        <span>请输入对应索引: </span><InputNumber :max="15" :min="0" v-model="value1"></InputNumber>
        <Button type="success" :loading="loading" style="margin-left: 10px" @click="dbClean()">点击清理</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { cacheList, cleanDB } from '@/api/database'

  export default {
    data () {
      return {
        modal1: false,
        value1: 0,
        region: '',
        columns_id: null,
        loading: false,
        loading_onekey: [],  
        columns1: [
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '环境',
            key: 'env'
          },
          {
            title: '端口',
            key: 'port'
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '创建日期',
            key: 'create_time'
          },
          {
            title: '操作',
            slot: 'action',
            width: 300,
            align: 'center'
          }
        ],
        data1: [],
        permission: ''
      }
    },
    created () {
      this.get_permission();
    },
    methods: {
      // 获取用户操作权限
      get_permission () {
        const auth = JSON.parse(sessionStorage.getItem('permission'))
        this.permission = auth.child
      },
      // 获取缓存数据
      data_list () {
        if (this.region.length !== 0) {
          cacheList(this.region).then(res => {
            for(let i = 0; i < res.data.count; i++) {
              this.loading_onekey[i] = false
            }
            this.data1 = res.data.results
          })
        }
      },
      //选择区域
      handRegion () {
        this.data_list()
      },
      // 获取当前行的id
      cleanDB_id (index) {
        this.modal1 = true
        this.columns_id = this.data1[index].id
      },
      // 按索引(db)清理缓存
      dbClean () {
        this.loading = true
        const data = {'id': this.columns_id, 'dbNumber': this.value1}
        cleanDB(data).then(res => {
          this.$Message.success({content:'清理成功!',duration: 5,closable: true})
        }).catch(err => {
           this.$Message.error({content:'清理失败!',duration: 5,closable: true})
        }).finally(() => {
          this.loading = false;
        })
      },
      // 一键清理
      oneKeyClean (index) {
        var new_loading_onekey_true =  [...this.loading_onekey]
        new_loading_onekey_true[index] = true
        this.loading_onekey = new_loading_onekey_true
        const data = {'id': this.data1[index].id}
        cleanDB(data).then(res => {
          this.$Message.success({content:'清理成功!',duration: 5,closable: true})
        }).catch(err => {
           this.$Message.error({content:'清理失败!',duration: 5,closable: true})
        }).finally(() => {
          var new_loading_onekey_false = [...this.loading_onekey]
          new_loading_onekey_false[index] = false
          this.loading_onekey = new_loading_onekey_false
        })
      }
    }
  }
</script>
</template>
